<template>
<div class="ym-authentication-login">
  <a-card class="tight">
    <div class="card-header">
      <img src="image/card-primary.png" />
      <h1 class="title">YM</h1>
    </div>
    <a-form :form="form" @submit="submit">
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-input
          v-decorator="[
            'username',
            {rules: [{ required: true, message: lang.v.required }]}
          ]"
        >
          <a-icon slot="prefix" type="user" />
          <a-icon v-if="username" slot="suffix" type="close-circle" @click="emitEmpty" />
        </a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-input
          v-decorator="[
            'password',
            {rules: [{ required: true, message: lang.v.required }]}
          ]"
        >
          <a-icon slot="prefix" type="key" />
          <a-icon v-if="password" slot="suffix" type="close-circle" @click="emitEmpty" />
        </a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 16, offset: 4 }" class="no-mgn">
        <a-button type="primary" html-type="submit" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      form: this.$form.createForm(this)
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    submit (e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
.ym-authentication-login {
  display: flex;
  justify-content: center;
  align-items: center;
  .ant-card {
    width: 300px;
    .welcome {
      font-weight: bold;
      text-align: center;
      margin-bottom: 30px;
    }
  }
  .ant-form {
    padding: 10px 10px 30px;
  }
}
</style>
